import React, { Component } from 'react';
import {
    StyleSheet, Modal,
    Text,
    View, Button, Image, TouchableHighlight
} from 'react-native';
import HeaderBar from '../../common/headerBar';
import { Variable } from '../../variables';
import DeviceRn from '../../components/Tools/device';
let DevWH = DeviceRn().getWidHig();
export default class MeScreen extends Component {
    static params = {
        Image: require('../../assets/images/me.png'),
        msg: '我的',
        header: null
    };
    static navigationOptions = ({ navigation, screenProps }) => HeaderBar(screenProps, MeScreen.params)

    constructor(props) {
        super(props);
        this.header=this.props.screenProps.header;
    }
   
    _itemClick(num) {
        let { navigate } = this.props.navigation;
        switch (num) {
            case '0':
                navigate('Message')
                break;
            case '1':
                navigate('FeedBack')
                break;
            case '2':
                navigate('Setting')
                break;
        }
    }
    _listItem(icon, txt, msg, lfet = 'left') {
        return (
            <View style={styles.listCont}>
                <TouchableHighlight style={{ flex: 1 }} activeOpacity={0.85} onPress={() => this._itemClick(msg)}>
                    <View style={styles.listItem}>
                        <Image style={[styles.listItem_icon, { tintColor: this.header }, Variable.icon]} source={icon} />
                        <Text style={styles.listItem_txt}>{txt}</Text>
                        <Image style={[{ tintColor: this.header }, styles.listItem_rico, Variable.icon]} source={require('../../assets/images/left.png')} />
                    </View>
                </TouchableHighlight>
            </View>
        );
    }
 
    render() {
        return (
            <View style={styles.contain}>
                {this._listItem(require('../../assets/images/message.png'), '消息提醒', '0')}
                {this._listItem(require('../../assets/images/feedback.png'), '意见反馈', '1')}
                {this._listItem(require('../../assets/images/setting.png'), '设置', '2')}
            </View>
        );
    }
};
const styles = StyleSheet.create({
    contain: {
        flex: 1,
    },
    bgModal: {
        flex: 1,
        backgroundColor: 'rgba(3,3,3,0.65)',
        width: DevWH.sW,
        justifyContent: 'center',
        alignItems: 'center',
    },
    modal: {
        flex: 0,
        width: 300,
        overflow: 'hidden',
        backgroundColor: '#fff',
        borderRadius: 8,
        alignItems: 'center',
        padding: 12,
    },
    modal_title: {
        fontWeight: '500',
        fontSize: 18,
        color: '#222',
        margin: 20
    },
    modal_subtitle: {
        fontWeight: '400',
        fontSize: 14,
        color: '#484848',
        lineHeight: 20
    },
    close: {
        flex: 1,
        backgroundColor: '#3b3738',
        margin: 20,
        width: 100,
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
        // overflow:'hidden'
    },
    listCont: {
        flex: 0,
        width: DevWH.sW,
        height: 72,
        marginTop: 10,
        flexWrap: 'wrap'
    },
    listItem: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    listItem_icon: {
        left: 20,
    },
    listItem_rico: {
        right: 20,
    },
    listItem_txt: {
        textAlign: 'left',
        fontSize: 16,
        fontWeight: "500",
        color: '#222',
        position: 'absolute',
        left: 70,
    }
});